<template>
    <div class="content-right">
        <div class="header">
            <p>销售额类别占比</p>
            <a>...</a>
        </div>
        <div class="options">
            <el-radio-group @change="changeRadio" v-model="radio1" style="margin-bottom: 30px;">
                <el-radio-button label="全部渠道">全部渠道</el-radio-button>
                <el-radio-button label="right">线上</el-radio-button>
                <el-radio-button label="bottom">门店</el-radio-button>
            </el-radio-group>
        </div>
        <div class="pictureArea" id="pictureArea">

        </div>
    </div>
</template>

<script>


    export default {
        name: "index",
        data() {
            return {
                radio1: '全部渠道',
            }
        },
        created() {
        },

        methods: {

            changeRadio(v,item) {
                console.log("鼠标点击事件：：", v)
                console.log("选择了：", item)
            },


        },

        mounted() {


            var chartDom = document.getElementById('pictureArea');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '销售额',
                    left: 'left'
                },

                legend: {
                    orient: 'vertical',
                    top: 'center',
                    right: 'right'
                },
                series: [
                    {
                        type: 'pie',
                        center: ["35%", "50%"],
                        radius: ['40%', '55%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 48.05, name: '家用电器  48.05%'},
                            {value: 735, name: '食用酒水  1.30%'},
                            {value: 580, name: '个人健康  1.21%'},
                            {value: 484, name: '服饰箱包  0,91%'},
                            {value: 300, name: '母婴产品  48.05%'},
                            {value: 100, name: '其他  0.48%'}
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);

        }

    }
</script>

<style scoped>
    .content-right {
        position: relative;
        width: 48%;
        background: #ffffff;
        left: 60px;
    }

    .content-right .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0 15px;
    }

    .header a {
        font-size: 20px;
    }

    .content-right .options {
        height: 40px;
        text-align: left;
        border-bottom: 1px solid #d3d3d3;
        padding: 10px 0 20px 15px;
    }

    .content-right .pictureArea {
        width: 500px;
        height: 79%;
        padding: 15px 0 0 15px;
    }
</style>
